figma 在 2024下半年針對操作介面做了不少改動，讓我們來看看

1. 標題列：
   上方標題列把工具移走了，僅留下：home、community、目前開啟的檔案名稱、add（+）、more(…) 這五個 icon button，讓標題列更加簡潔。
   home：登入帳號（user）的首頁，包括檔案架構、帳號設定等等，不是 figma 的官方首頁喔！
   community： figma 提供的社群功能，可以在這裡找到很多不錯的資源喔！
   檔案名稱：目前開啟的檔案名稱，點擊「X」可以關閉檔案。
   add(+)：點擊「＋」，可以開啟或新增檔案。
   more(…)：點擊「…」會出現最近關閉的檔案，可以快速再開啟剛剛被關掉的檔案。

2. 左側面板：左側面板的內容會隨著上方 icon button 的點擊而有所不同：
   。點擊 home 鍵：顯示檔案架構、帳號。
   　　檔案架構：請看「上一篇」。
   　　帳　　號：目前登入的帳號，下拉可以修改帳號內容的設定。
   。點擊檔案名稱：頁面（Page）、資源（Assets）、圖層（Layers）
   　　頁面（Page）：針對不同功能或需求來創建頁面，例如：登入功能、列印功能，
   　　　　　　　　　就可以創建login 頁面、print 頁面，可以有效管理設計稿，
   　　　　　　　　　也可以創建一個design System 的頁面，專門管理這個專案
   　　　　　　　　　的所有components、spec 等等。
   　　資源（Assets）：檔案的所有 components 都會放在這裡，可以直接拖曳出分身
   　　　　　　　　　　（Instance）來使用，在這次的改版中，資源（Assets）除了
   　　　　　　　　　　原有的 components 之外，增加了原生的 UI Kit （支援
   　　　　　　　　　　iOS18、Material 3、Simple Design System 等等），只
   　　　　　　　　　　要在 Asset 面板裡就可以找到相關的 UI Kit 來使用。
   　　圖層（Layers）：在圖層裡可以看到設計稿中的組件、物件、文字等等的上下層
   　　　　　　　　　 關係，可以針對組件、物件、文字等等做層級順序調整或重新
   　　　　　　　　　 命名。
   　　改動（old/new）：舊版 figma 的 Page、Assets、Layers 是統一併排在左側面板
   　　　　　　　　　　上方，新版則把 Page 放在 File 頁籤裡面，Layers 則移到 Page
   　　　　　　　　　　下方。
   

3. 畫布區：也就是工作區、設計區、草稿區，盡情揮灑設計靈感的地方，也會顯示所有的 Drafts、files。

4. 右側面版：分為2個部份：設計（Design）、原型（Prototype）。
   。設計（Design）：針對設計的組件、物件，顯示對應的屬性，例如：寬高、
         填色、邊框、字體、字級、效果⋯⋯等等，提供設計師做設計調整。（若沒有
         點選任何組件、物件，僅可以調整 Page 的底色）
   。原型（prototype）：設定互動機制，包括流程設計、點擊反饋等等，製作
        prototype 可以讓設計師跟團隊中的成員（PM、RD⋯⋯）進行討論及修正，
         是很重要的一環。（聽說有的PM直接拿 prototype 去跟客戶 Demo!驚～）

5. 工具列：這次 figma 很大的改動之一就是把工具列往下移了，並且少了 Create component、Add variant 這兩個常用的功能按鈕，一開始很不習慣，但往好處想，figma 大概是想要強迫我們使用快捷鍵吧XDD。當然，它沒有不見，它被收在右側面版中了，只要點選物件或文字，在右側面版中就會看到它們了。
   

工具列的各個工具：

• A：移動工具：可以移動、縮放物件，也可以平移頁面。
• B：設計框架、切片工具：在這裡可以選擇要開啟的設計框架（Frame、Section），或是針對某一物件切圖（Slice）輸出成想要的圖（png、jpg、svg）。ps.若選擇 Frame 可在右側面版選取想要的設計尺寸。（iPhone、Desktop、Watch⋯⋯）
• C：繪圖工具：這應該不用多說了吧？（被揍 part I）你想畫的圓形、矩形、多邊形、直線，都在這裡面。
• D：鋼筆工具：這可以不用多說了吧？（被揍 part II）可以畫貝茲曲線或不規則線段。
• E：文字工具：這真的不用多說了吧？（被揍 part III）直接打字是一般文字（不會折行），拖曳出方框打字則是區域文字（會折行）。
• F：註記（Comment）：可以在設計稿中加入註記，讓工程師或 PM 更了解設計稿內容，也可以註記給自己，以防忘記或漏掉設計時要注意的事項。
• G：外掛（Plugin）：在新版中，Plugin 面版除了外掛搜尋之外，多了 Assets，可以找到你想要的元件，直接拖曳到設計稿中。
• H：開發模式（Dev Mode）：這應該是設計師與工程師的共同最愛，在開發模式中可以看到工程交付文件需要的各種數據，包括物件的寬高、位置、間距等等，右側面版也可看到 box Model、Code，包括CSS、iSO、Android，真是太佛心了。雖然 code 不一定適合工程師的「口味」，但是誠意滿滿是吧？

6. Light Mode／Dark Mode：在帳號的下拉選單中，找到 Theme ，就可以切換顯示模式，本人因為眼睛過度使用已經快瞎了，所以文章中的示範截圖都是用 Dark Mode ，若是看不習慣的捧油們，敬請自行切換 Light Mode 做對照喔！
   

呼～介面操作說明終於講完了，當然還有更細節的東西沒講到，待後續有用到或是有緣的時候再進一步說明囉！再來就要針對 UI 設計時會用到的功能來練功了，我們明天繼續。